<!-- <template>
  <van-nav-bar
    title="登录"
    left-text="返回"
    left-arrow
    @click-left="$router.back()"
    fixed
    placeholder
  />

  <van-form @failed="onFailed" @submit="onSubmit">
    <van-cell-group inset>
       通过 pattern 进行正则校验
      <van-field
        label="用户名"
        v-model="username"
        name="username"
        placeholder="用户名"
        :rules="[{ pattern: /\w{3,}/, message: '请输入三位以上的字母数字下划线' }]"
        required
        :clearable="true"
      />
      <van-field
        type="password"
        label="密码"
        v-model="password"
        name="password"
        placeholder="密码"
        :rules="[{ pattern: /.{3,}/, message: '请输入三位以上，六位以下的任意字符' }]"
        required
        :clearable="true"
      />
    </van-cell-group>
    <div style="margin: 16px">
      <van-button round block type="primary" native-type="submit"> 登录 </van-button>
    </div>
  </van-form>
</template>
<script setup>
import { ref } from 'vue'
import { loginRequest } from '@/api/user'
import router from '@/router'
const username = ref('')
const password = ref('')
function onFailed() {}

async function onSubmit() {
  console.log('onSubmit')
  let r = await loginRequest(username.value, password.value)
  console.log(r.data)
  if ((r.data.code = 1)) {
    router.push('/')
    showSuccessToast('登录成功')
    localStorage.setItem('token', r.data.data.token)
    localStorage.setItem('userid', r.data.data.userid)
  } else {
    showFailToast(r.data.data)
  }
}

// function regFn(){
//   console.log(username.value,password.value);

// }
// function regFn() {
//   let url = "http://localhost:3001/api/user/login";
//   axios
//     .post(
//       url,
//       { loginname: username.value, password: password.value },
//       { headers: { "content-Type": "application/x-www-form-urlencoded" } },
//     )
//     .then((r) => {
//       console.log(r.data);
//       let { code, message, token, use } = r.data;
//       if ((code = 200)) {
//         alert(message);
//         router.push("/");
//       } else {
//         router.push("/reg");
//       }
//     });
// }
</script>
<style scoped>
.btn1 {
  background-color: rgb(64, 158, 255);
  border: none;
  border-radius: 5%;
}
.btn2 {
  background-color: #f56c6c;
  border: none;
  border-radius: 5%;
}
.box {
  margin: 0 auto;
  width: 80%;
  height: 350px;
  background-color: #fff;
  border: 1px solid #ccc;
  padding: 20px;
}
</style> -->
